<template>
  <div class="dashboard-container">
    <h2 class="head-big-title">Perincian Pengguna</h2>
    <div style="width: 92%;margin: 0 4% 30px 4%;background-color: white;text-align: left;padding: 10px 1% 50px 2%;">
      <el-form
        :model="detailData"
        label-position="top"
        size="medium"
        label-width="110px">
        <el-form-item label="Nama: ">
          <el-input v-model="detailData.name" @input="changeNew($event)" placeholder="Nama"></el-input>
        </el-form-item>
        <el-form-item label="Emel: ">
          <el-input v-model="detailData.email" @input="changeNew($event)" placeholder="Emel"></el-input>
        </el-form-item>
        <el-form-item label="Imej Profil: " style="height: 122px;position: relative;">
          <el-upload
            style="display: inline-block;width: 188px;height: 88px;"
            ref="upload"
            :limit="1"
            action="http://"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :show-file-list="false"
            :http-request="uploadFile"
            :auto-upload="false">
            <img slot="trigger" :src="picbase + detailData.headUrl" style="width: 80px;"/>
          </el-upload>
        </el-form-item>
        <el-form-item label="Kata Laluan: ">
          <el-input v-model="detailData.pwd" type="password" @input="changeNew($event)" placeholder="******"></el-input>
        </el-form-item>
        <el-form-item label="Pastikan Kata Laluan: ">
          <el-input v-model="repeatPwd" type="password" @input="changeNew($event)" @blur="checkAndEdit" placeholder="******"></el-input>
        </el-form-item>
        <div>
          <el-button type="primary" round @click="editUserInfo" style="float: right;margin-left: 15px;" :disabled="submitLoading">Simpan</el-button>
          <el-button round @click="$router.go(-1)" style="float: right;">Balik</el-button>
        </div>
      </el-form>
    </div>
    <el-dialog :visible.sync="showConfirm">
      <el-input v-model="oldPwd" type="password" @input="changeNew($event)" placeholder="old password"></el-input>
      <el-button type="primary" style="margin: 30px 0 0 0" @click="editPwd">Yes</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { infoUserApi, uploadFileApi, editUserApi, newpwdEditApi, resetpwdApi } from '@/api/user'

export default {
  name: 'CustomersDetails',
  data() {
    return {
      tableData: [],
      detailData: {},
      showConfirm: false,
      fileList: [],
      uploadData: {
        fieldData: {
        }
      },
      submitLoading: false,
      repeatPwd: '',
      oldPwd: '',
      orderChart: ''
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      infoUserApi().then(res => {
        this.detailData = res.data
      }).catch(err => {
        this.$message.error('ERROR')
        this.detailData = []
        console.log(err)
      })
    },
    editUserInfo() {
      editUserApi(this.detailData).then(res => {
        this.$message({
          message: 'Berjaya',
          type: 'success'
        })
        this.$store.commit('user/SET_NAME', this.detailData.name)
        this.$store.commit('user/SET_HEADURL', this.detailData.headUrl)
        localStorage.removeItem('userInfo')
        this.$router.go(-1)
      }).catch(err => {
        this.detailData = []
        console.log(err)
      })
    },
    beforeEditPwd() {
      if (this.repeatPwd == '') {
        return false
      }
      return (this.detailData.pwd === this.repeatPwd)
    },
    checkAndEdit() {
      if (!this.beforeEditPwd()) {
        this.$message.error('Kata laluan tidak sama!')
        return false
      }
      this.showConfirm = true
    },
    resetPwd() {
      resetpwdApi().then(res => {
        this.$message({
          message: 'Berjaya ubah',
          type: 'success'
        })
        this.showConfirm = false
      }).catch(err => {
        this.$message.error('ERROR')
        console.log(err)
      })
    },
    editPwd() {
      const requestData = {
        newpwd: this.detailData.pwd,
        oldpwd: this.oldPwd
      }
      newpwdEditApi(requestData).then(res => {
        this.$message({
          message: 'Berjaya ubah',
          type: 'success'
        })
        this.showConfirm = false
      }).catch(err => {
        this.$message.error('ERROR')
        console.log(err)
      })
    },
    uploadFile(file) {
      this.fileData.append('mf', file.file)
    }, // 上传文件
    submitUpload() {
      if (this.fileList.length === 0) {
        this.$message({
          message: 'Sila pilih',
          type: 'warning'
        })
      } else {
        const isLt2M = this.fileList.every(file => file.size / 1024 / 1024 < 1)
        if (!isLt2M) {
          this.$message.error('Sila pastikan fail yang dipilih tidak melebihi 1MB')
        } else {
          this.fileData = new FormData()
          this.$refs.upload.submit()
          this.fileData.append('num', 1)
          this.fileData.append('index', 1)
          this.submitLoading = true
          uploadFileApi(this.fileData).then((response) => {
            this.$message({
              message: 'Berjaya muat naik',
              type: 'success'
            })
            this.detailData.headUrl = response.data.picUrl[0]
            this.$refs.upload.clearFiles()
            this.submitLoading = false
          }).catch(err => {
            this.submitLoading = false
            console.log(err)
          })
        }
      }
    }, // 上传到服务器
    handleRemove(file, fileList) {
      this.fileList = fileList
    }, // 移除
    handleExceed(files, fileList) {
      this.$message.warning('Hanya terbanyak 3 fail boleh dipilih ')
    }, // 选取文件超过数量提示
    handleChange(file, fileList) {
      const existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
      if (existFile) {
        this.$message.error('Fail yang dipilih telah wujud')
        fileList.pop()
      }
      this.fileList = fileList
      this.submitUpload()
    }, // 监控上传文件列表
    handleEdit() {
      console.log('Chose handleEdit')
    }
  }
}
</script>

<style lang="scss" scoped>
  .head-big-title{
    text-align: left;
    font-size: 20px;
    margin: 20px 0 0 3%;
  }
  .dashboard-container{
    margin-top: 20px;
    text-align: center;
  }

</style>
<style scoped>
  /deep/.el-form-item{
    margin-bottom: 12px;
  }
  /deep/.head-search label{
    line-height: 30px;
  }
  .big-title{
    text-align: left;
    font-size: 19px;
    margin: 20px 0;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #b4b4b4;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .avatar {
    width: 128px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    border: 2px solid #8c939d;
    border-radius: 16px;
    font-size: 28px;
    color: #8c939d;
    width: 133px;
    height: 133px;
    line-height: 133px;
    text-align: center;
  }
  /deep/ .el-upload-list{
    width: 88px;
    padding: 0;
    margin: 0;
    position: relative;
    bottom: 60px;
  }
  /deep/ .el-upload-list img{
    width: 70px;
    height: 70px;
  }
  /deep/ .el-upload img{
    width: 80px;
    height: 80px;
  }
</style>
